<template>
  <el-button plain @click="handleAdd">➕新增</el-button>
  <!-- 新增用户 -->
  <el-dialog
    v-model="emodifyDialogVisible"
    title="修改"
    width="30%"
    destroy-on-close
    center
  >
    <el-form ref="ruleFormRef" :model="form" :rules="rules">
      <el-form-item label="用户名：" label-width="80px" prop="name">
        <el-input
          autocomplete="off"
          class="form-name"
          v-model.trim.lazy="form.name"
        />
      </el-form-item>
      <el-form-item label="密码：" label-width="80px" prop="password">
        <el-input
          autocomplete="off"
          v-model.trim.lazy="form.psw"
          show-password
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emodifyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { postTrafficUserHttp } from '../../../request/userHttp.js'

const emodifyDialogVisible = ref(false)

//表单校验
const rules = ref({
  name: [
    {
      required: true,
      message: '用户名不能为空',
      tigger: 'blur',
    },
    {
      min: 3,
      max: 8,
      message: '用户名长度必须在3~8之间',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      tigger: 'blur',
    },
  ],
})

// 注册表单
const form = reactive({
  name: '',
  psw: '',
})

// 添加用户
function handleAdd() {
  emodifyDialogVisible.value = true
}

// 确定
function handleConfirm() {
  emodifyDialogVisible.value = false
  postTrafficUserHttp(form.name, form.psw)
  ElMessage({
    message: '添加交管成功',
    type: 'success',
  })
}
</script>

<style scoped></style>
